import React, { Component } from "react"
import { withRouter } from "react-router";
import styles from './alarm.less'
import Header from '@/components/header'
import { getAlarm } from '@/services'
import md5 from 'js-md5';

class Alarm extends Component {

  constructor(props){
    super(props);
    this.state = {
      pageData: [],
      noData: false,
    }
    this.pageIndex = 1;
    this.pageSize = 20;
    this.loading = false;
    this.hasMore = true;
  }

  componentDidMount(){
    this.init()
    this.event = window.addEventListener("scroll", this.scorllEvent)
  }

  componentWillUnmount(){
    this.event = window.removeEventListener("scroll", this.scorllEvent)
  }

  init = async () => {
   try {
    this.pageIndex = 1;
    this.loading = false;
    this.hasMore = true;
    const data = await getAlarm({ equipCode: '', pageNo: 1, pageSize: this.pageSize });
    if(data.code === 200){
      this.setState({
        pageData: data.data,
        noData: data.data.length === 0
      })
    }
   } catch (error) {
     console.log(error);
     this.setState({
       noData: true
     })
   }
  }

  scorllEvent = async (event) => {
    if(!this.hasMore) return false;
    let onPullUpHeight=this.pullList.clientHeight;
    let documentHeight=document.documentElement.clientHeight;
    let documentTop=document.documentElement.scrollTop;
    if(onPullUpHeight>documentHeight&&onPullUpHeight<documentHeight+documentTop-50){
        if(this.loading) return false;
        this.loading = true;
        const data = await getAlarm({ equipCode: '', pageNo: ++this.pageIndex, pageSize: this.pageSize });
        this.loading = false;
        if(data.code === 200){
          const tempList = this.state.pageData.slice();
          this.setState({ pageData: tempList.concat(data.data) });
          this.hasMore = (this.pageSize==data.data.length)
        }
    }
  }

  toDetail = (data) => {
    const time = new Date(data.dataDate)
    const month = time.getMonth() + 1;
    const day = time.getDate();
    const worktime = {
      beginDate: `${time.getFullYear()}-${month<10 ? '0' : ''}${month}-${day<10 ? '0' : ''}${day}`,
      endDate: `${time.getFullYear()}-${month<10 ? '0' : ''}${month}-${day<10 ? '0' : ''}${day}`
    }
    this.props.history.push(`carDetail?equipCode=${data.equipCode}&source=selfpage&token=${md5(data.equipCode+'selfpage'+'s$31d0dl1!~93-kHj^S')}`, { worktime })
  }

  render(){
    return (
      <div className={styles.alarm}>
        <Header>报警信息</Header>
        {this.state.noData ? 
        <div> 
          <img className={styles.noAlarm} src={require('../assets/img/noalarm.png')} />
          <div className={styles.noText}>暂无报警信息</div>
        </div> :
        <div ref={el=>{ this.pullList = el }}>
          {this.state.pageData.map((data, index)=>{
            const time = new Date(data.dataDate)
            const month = time.getMonth() + 1;
            const day = time.getDate();
            const hour = time.getHours();
            const min = time.getMinutes();
            const second = time.getSeconds();
            return (
                <div key={index} className={styles.item} onClick={()=>{ this.toDetail(data) }}>
                  {data.type==1?<img className={styles.item_icon} src={require('../assets/img/alarm_oil.png')} />
                  :<img className={styles.item_icon} src={require('../assets/img/alarm_pump.png')} />}
                  <div className={styles.item_content}>
                    <div className={styles.content_top}><span className={styles.title}>{data.type==1?'方量油耗异常':'违规使用高压泵送'}</span><span className={styles.no}>({data.equipCode})</span></div>
                    <div className={styles.content_bottom}>
                      {data.type==1 ? `${time.getFullYear()}/${month<10 ? '0' : ''}${month}/${day<10 ? '0' : ''}${day} 方量油耗`
                      : `${time.getFullYear()}/${month<10 ? '0' : ''}${month}/${day<10 ? '0' : ''}${day}  ${hour<10 ? '0' : ''}${hour}:${min<10 ? '0' : ''}${min}:${second<10 ? '0' : ''}${second} 使用高压泵送状态`}
                      <span style={{ color: '#EA5C51' }}>{data.value}</span></div>
                  </div>
                </div>
              )
            })}
        </div>
       }
      </div>
    )
  }

}

export default withRouter(Alarm)